#bg-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#bg-circle div {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  transition: none;
}
#bg-circle div:first-child {
  width: 5rem;
  height: 5rem;
  background: #5c77ee;
  box-shadow: 0 0 0.5rem 0.5rem #5c77ee;
  animation: c1 15s infinite;
}
#bg-circle div:nth-child(2) {
  width: 4rem;
  height: 4rem;
  background: #5ceed6;
  box-shadow: 0 0 0.5rem 0.5rem #5ceed6;
  animation: c2 20s infinite;
}
#bg-circle div:nth-child(3) {
  bottom: 1rem;
  right: 5rem;
  width: 6rem;
  height: 6rem;
  background: #aaf189;
  box-shadow: 0 0 0.5rem 0.5rem #aaf189;
  animation: c3 30s infinite;
}
@keyframes c1 {
  0% {
    top: -2rem;
    right: -1rem;
  }
  20% {
    top: -2.5rem;
    right: -1.5rem;
  }
  40% {
    top: -1.8rem;
    right: -2rem;
  }
  60% {
    top: -2.2rem;
    right: -1rem;
  }
  80% {
    top: -1.6rem;
    right: -2.2rem;
  }
  100% {
    top: -2rem;
    right: -1rem;
  }
}
@keyframes c2 {
  0% {
    top: 4.2rem;
    left: -1.2rem;
    transform: rotate(0deg);
  }
  20% {
    top: 5.4rem;
    left: -2.4rem;
    transform: rotate(72deg);
  }
  40% {
    top: 4rem;
    left: -0.4;
    transform: rotate(144deg);
  }
  60% {
    top: 4.8rem;
    left: -0.8rem;
    transform: rotate(218deg);
  }
  80% {
    top: 3.6rem;
    left: -2rem;
    transform: rotate(296deg);
  }
  100% {
    top: 4.2rem;
    left: -1.2rem;
    transform: rotate(360deg);
  }
}
@keyframes c3 {
  0% {
    bottom: 1rem;
    right: 5rem;
  }
  20% {
    bottom: 2.2rem;
    right: 6.4rem;
  }
  40% {
    bottom: 1.6rem;
    right: 8rem;
  }
  60% {
    bottom: 0.2rem;
    right: 6.6rem;
  }
  80% {
    bottom: -1.6rem;
    right: 3.2rem;
  }
  100% {
    bottom: 1rem;
    right: 5rem;
  }
}
